import React, { Component } from 'react';
import {NavLink, Route, Redirect} from 'react-router-dom';
import News from './News';
import Messages from './Messages';
import { Switch } from "react-router-dom/cjs/react-router-dom.min";


export default class Home extends Component {
  render() {
    return (
      <div>
        <h3>我是home的内容,注意二级路由这里如果在一级里面开启了严格模式，那么/home/news将不能匹配/home也就是无法进入到home组件里面</h3>
        <div>
          <ul className='nav nav-tabs'>
            <li>
              <NavLink className="list-group-item" to="/home/news">News</NavLink>
            </li>
            <li>
              <NavLink className="list-group-item" to="/home/messages">Meassages</NavLink>
            </li>
          </ul>
        </div>
        <Switch>
            <Route path="/home/news" component={News} />
            <Route path="/home/messages" component={Messages} />
            <Redirect to="/home/news"></Redirect>
        </Switch>
      </div>
      
    )
  }
}
